<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="list"
      border
      style="width: 100%"
      :max-height="tableHeight"
      :key="tableHeight"
      v-tabscroll="$getTableHeight"
    >
      <el-table-column prop="contractCode" label="合同编号" width="120px" />
      <el-table-column prop="customerName" label="客户姓名" />
      <el-table-column prop="customerMobile" label="客户电话" width="110px" />
      <!-- <el-table-column prop="need" label="进件额度" /> -->
      <el-table-column prop="productName" label="产品" width="150px" />
      <el-table-column prop="deposit" label="在审金额" />
      <!-- <el-table-column prop="counts" label="进件数量" /> -->
      <!-- <el-table-column prop="completion" label="完成额度" /> -->
      <el-table-column prop="income" label="佣金" />
      <el-table-column prop="progress" label="进度">
        <template slot-scope="{ row }">
          <span>{{ INPUTSTATUSLIST[row.progress] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="{ row }">
          <span>{{ row.state === 1 ? "正常" : "作废" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="incomeDate" label="收款日期" width="160px" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createDate" label="创建日期" width="160px" />
      <el-table-column prop="checkBy" label="审核人" />
      <el-table-column prop="checkDate" label="审核日期" width="160px" />
      <el-table-column prop="checkBy" label="付款证明">
        <template slot-scope="{ row }">
          <!-- <el-image :src="getImages(row.certificate)" v-if="row.certificate" :preview-src-list="[row.certificate]"></el-image> -->
          <el-image
            :src="item"
            class="tab_td_img"
            v-for="(item, index) in getImages(row.certificate)"
            :key="`img_${index}`"
            :preview-src-list="[item]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="updateBy" label="修改人" />
      <el-table-column prop="updateDate" label="修改日期" width="160px" />
      <el-table-column label="操作" width="140" fixed="right" align="center">
        <template slot-scope="{ row }" v-if="row.state === 1">
          <el-button type="primary" plain size="mini" @click="editHandle(row)"
            >编辑</el-button
          >
          <el-button type="danger" plain size="mini" @click="handleDelete(row)"
            >作废</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <glsx-dialog
      title="编辑进件"
      :show="editInputDialog"
      @close="closeInputDialog()"
    >
      <Form
        ref="Form"
        @updateEvent="updateEvent"
        @change="closeInputDialog()"
        :submitType="2"
      />
    </glsx-dialog>
  </div>
</template>
<script>
import { updateImport } from "@/api/finance";
import { INPUTSTATUSLIST } from "@/common/constants";
import Form from "@/views/my-client/my-input/Form.vue";
export default {
  name: "ImportTable",
  components: {
    Form,
  },
  data() {
    return {
      INPUTSTATUSLIST,
      progressObj: {
        0: "初始",
        1: "审核中",
        2: "渠道拒绝",
        3: "客户拒绝",
        4: "已交付",
        5: "已收款",
        6: "完成",
      },
      editInputDialog: false,
      tableHeight: 0,
    };
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    // 计算表格的高度
    let _this = this;
    this.$getTableHeight();
    window.onresize = function () {
      _this.$getTableHeight();
    };
  },
  methods: {
    handleDelete(row) {
      this.$confirm("此操作将合同作废, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.updateImport(row.contractId);
        })
        .catch(() => {});
    },
    async updateImport(id) {
      const res = await updateImport({ id, state: 2 });
      if (!res.result) return;
      this.$message.success("作废成功");
      this.$parent.getImportList();
    },

    // 编辑进件
    editHandle(item) {
      this.editInputDialog = true;
      this.$nextTick(() => {
        this.$refs.Form.setData(Object.assign({}, item));
      });
    },

    // 监听组件变化
    updateEvent() {
      this.editInputDialog = false;
      this.$parent.getImportList();
    },

    // 关闭弹框
    closeInputDialog() {
      this.editInputDialog = false;
    },

    getImages(str) {
      if (!str) {
        return [];
      }
      let arr = str.split(",");
      console.log(arr);
      return arr;
    },
  },
};
</script>
